<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .right-nav {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
      width: 254px;
      height: 494px;
      background: url(./img/right_nav_bg.png) no-repeat;
    }

    .right-nav .right-list {
      position: relative;
      left: 60px;
    }

    .right-nav .right-list .item {
      width: 117px;
      height: 38px;
      background: url(./img/right_all.png) no-repeat;
    }

    .right-nav .right-list .code {
      height: 116px;
      text-align: center;
      background-position: 0 -3px;
    }

    .right-nav .right-list .code img {
      width: 111px;
      height: 110px;
      margin-top: 3px;
    }

    .right-nav .right-list .item.weibo {
      background-position: -122px -120px;
    }
    .right-nav .right-list .item.weibo:hover{
      background-position: -122px -240px;
    }

    .right-nav .right-list .item.weixin {
      background-position: -122px -160px;
    }

    .right-nav .right-list .item.weixin:hover {
      background-position: -122px -200px;
    }

    .right-nav .right-list .item.shipin {
      background-position: -122px 0;
    }

    .right-nav .right-list .item.shipin:hover {
      background-position: -122px -42px;
    }

    .right-nav .right-list .item a {
      display: block;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="right-nav">
    <div class="right-dj">
      <img src="./img/right_dj.png" alt="">
    </div>
    <ul class="right-list">
      <li class="item code">
        <img src="./img/right_code.webp" alt="">
      </li>
      <li class="item weibo">
        <a href="#"></a>
      </li>
      <li class="item weixin">
        <a href="#"></a>
      </li>
      <li class="item shipin">
        <a href="#"></a>
      </li>
      <ul />
  </div>
</body>

</html>